<script setup>
import Header from '@/components/sc_header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/sc_footer/App.vue'
</script>

<template>
  <Header></Header>
  <main class="main-content">
    <div class="container">
      <!-- 轮播图 -->
      <section class="banner">
        <div class="banner-content">
          <h1 class="banner-title">城乡一体化示范区双创门户</h1>
          <p class="banner-subtitle">汇聚创新资源 · 服务创业群体 · 促进区域发展</p>
        </div>
      </section>

      <!-- 通知公告与新闻动态 -->
      <div class="info-grid">
        <div class="info-card">
          <div class="card-header">通知公告</div>
          <div class="card-body">
            <div class="news-item">
              <div class="news-title">关于开展2023年度双创项目申报工作的通知</div>
              <div class="news-date">2023-09-01</div>
            </div>
            <div class="news-item">
              <div class="news-title">示范区创新创业大赛获奖名单公示</div>
              <div class="news-date">2023-08-25</div>
            </div>
            <div class="news-item">
              <div class="news-title">关于举办双创政策解读培训会的通知</div>
              <div class="news-date">2023-08-18</div>
            </div>
          </div>
        </div>

        <div class="info-card">
          <div class="card-header">新闻动态</div>
          <div class="card-body">
            <div class="news-item">
              <div class="news-title">示范区召开双创工作推进会</div>
              <div class="news-date">2023-09-03</div>
            </div>
            <div class="news-item">
              <div class="news-title">我区3家企业入选省级专精特新中小企业</div>
              <div class="news-date">2023-08-30</div>
            </div>
            <div class="news-item">
              <div class="news-title">创新创业孵化基地迎来首批入驻企业</div>
              <div class="news-date">2023-08-22</div>
            </div>
          </div>
        </div>

        <div class="info-card">
          <div class="card-header">园区风采</div>
          <div class="card-body">
            <div class="news-item">
              <div class="news-title">科技创新园全景展示</div>
              <div class="news-date">2023-08-15</div>
            </div>
            <div class="news-item">
              <div class="news-title">高新技术企业生产线参观</div>
              <div class="news-date">2023-08-10</div>
            </div>
            <div class="news-item">
              <div class="news-title">创业孵化基地环境介绍</div>
              <div class="news-date">2023-08-05</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 双创政策 -->
      <section class="info-card">
        <div class="card-header">双创政策</div>
        <div class="card-body">
          <div class="info-grid">
            <div class="info-card">
              <div class="card-header" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">国家部委政策
              </div>
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">关于支持创新创业高质量发展的若干意见</div>
                  <div class="news-date">2023-07-20</div>
                </div>
                <div class="news-item">
                  <div class="news-title">中小企业促进法实施细则</div>
                  <div class="news-date">2023-06-15</div>
                </div>
              </div>
            </div>
            <div class="info-card">
              <div class="card-header" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">河南省政策
              </div>
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">河南省促进中小企业发展条例</div>
                  <div class="news-date">2023-07-10</div>
                </div>
                <div class="news-item">
                  <div class="news-title">关于支持科技型中小企业发展的若干措施</div>
                  <div class="news-date">2023-06-05</div>
                </div>
              </div>
            </div>
            <div class="info-card">
              <div class="card-header" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">濮阳市政策
              </div>
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">濮阳市科技创新驱动高质量发展实施方案</div>
                  <div class="news-date">2023-06-20</div>
                </div>
                <div class="news-item">
                  <div class="news-title">关于促进民营经济高质量发展的实施意见</div>
                  <div class="news-date">2023-05-15</div>
                </div>
              </div>
            </div>
            <div class="info-card">
              <div class="card-header" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">示范区政策
              </div>
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">城乡一体化示范区双创扶持办法</div>
                  <div class="news-date">2023-06-01</div>
                </div>
                <div class="news-item">
                  <div class="news-title">关于加快科技企业孵化器建设的实施意见</div>
                  <div class="news-date">2023-05-10</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 双创资源 -->
      <section class="info-card">
        <div class="card-header">双创资源</div>
        <div class="card-body">
          <div class="info-grid">
            <div class="info-card">
              <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">专家资源</div>
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">示范区双创专家库名单</div>
                  <div class="news-date">2023-08-28</div>
                </div>
                <div class="news-item">
                  <div class="news-title">产业技术顾问团队介绍</div>
                  <div class="news-date">2023-08-15</div>
                </div>
              </div>
            </div>
            <div class="info-card">
              <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">项目资源</div>
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">2023年度重点支持项目清单</div>
                  <div class="news-date">2023-08-20</div>
                </div>
                <div class="news-item">
                  <div class="news-title">科技成果转化项目库</div>
                  <div class="news-date">2023-08-10</div>
                </div>
              </div>
            </div>
            <div class="info-card">
              <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">载体资源</div>
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">创业孵化基地入驻指南</div>
                  <div class="news-date">2023-08-05</div>
                </div>
                <div class="news-item">
                  <div class="news-title">科技创新园实验室共享计划</div>
                  <div class="news-date">2023-07-28</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 双创活动 -->
      <section class="info-card">
        <div class="card-header">双创活动</div>
        <div class="card-body">
          <div class="info-grid">
            <div class="info-card">
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">创新创业大赛决赛</div>
                  <div class="news-date">2023-09-15</div>
                </div>
                <div class="news-item">
                  <div class="news-title">科技成果对接会</div>
                  <div class="news-date">2023-09-08</div>
                </div>
              </div>
            </div>
            <div class="info-card">
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">创业导师面对面</div>
                  <div class="news-date">2023-09-10</div>
                </div>
                <div class="news-item">
                  <div class="news-title">投融资路演活动</div>
                  <div class="news-date">2023-09-05</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 双创项目 -->
      <section class="info-card">
        <div class="card-header">双创项目</div>
        <div class="card-body">
          <div class="info-grid">
            <div class="info-card">
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">智能制造生产线优化项目</div>
                  <div class="news-date">2023-08-30</div>
                </div>
                <div class="news-item">
                  <div class="news-title">新型环保材料研发项目</div>
                  <div class="news-date">2023-08-25</div>
                </div>
              </div>
            </div>
            <div class="info-card">
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">智慧农业物联网系统</div>
                  <div class="news-date">2023-08-20</div>
                </div>
                <div class="news-item">
                  <div class="news-title">生物医药研发平台</div>
                  <div class="news-date">2023-08-15</div>
                </div>
              </div>
            </div>
            <div class="info-card">
              <div class="card-body">
                <div class="news-item">
                  <div class="news-title">新能源电池技术攻关</div>
                  <div class="news-date">2023-08-10</div>
                </div>
                <div class="news-item">
                  <div class="news-title">数字经济服务平台</div>
                  <div class="news-date">2023-08-05</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 网站声明 -->
      <section class="info-card">
        <div class="card-header">网站声明</div>
        <div class="card-body">
          <p>本网站是城乡一体化示范区双创服务的官方门户，旨在为社会公众、创业创新群体和政府相关人员提供全面、准确、及时的双创信息服务。</p>
          <p>网站功能包括政策发布、资源对接、活动通知、企业展示等，致力于打造示范区双创服务的一站式平台。</p>
        </div>
      </section>

      <!-- 专题栏目 -->
      <section class="special-section">
        <h2 class="special-title">专题栏目</h2>
        <div class="special-grid">
          <div class="special-card">
            <div class="special-image">不忘初心<br>牢记使命</div>
            <div class="special-content">
              <h3>不忘初心 牢记使命</h3>
              <p>党建引领双创发展，不忘初心砥砺前行</p>
            </div>
          </div>
          <div class="special-card">
            <div class="special-image">大众创业<br>万众创新</div>
            <div class="special-content">
              <h3>大众创业 万众创新</h3>
              <p>激发创新活力，推动创业热潮</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 站内搜索 -->
      <section class="search-section">
        <h2 class="search-title">站内搜索</h2>
        <form class="search-form">
          <input type="text" class="search-input" placeholder="请输入关键词...">
          <button type="submit" class="search-btn">搜索</button>
        </form>
      </section>
    </div>
  </main>

  <Footer></Footer>
</template>
<style scoped>


/* 主要内容区域 */
.main-content {
  padding: 30px 0;
}

/* 轮播图区域 */
.banner {
  height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.banner-content {
  z-index: 2;
  padding: 0 20px;
}

.banner-title {
  font-size: 36px;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-subtitle {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 信息卡片区域 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.info-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
}

.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 600;
}

.card-body {
  padding: 20px;
}

.news-item {
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

.news-item:last-child {
  border-bottom: none;
}

.news-title {
  font-weight: 600;
  margin-bottom: 5px;
  color: #1e3c72;
}

.news-date {
  font-size: 12px;
  color: #64748b;
}

/* 专题栏目 */
.special-section {
  margin-bottom: 30px;
}

.special-title {
  font-size: 24px;
  color: #1e3c72;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}

.special-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.special-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.special-image {
  height: 150px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.special-content {
  padding: 15px;
}

.special-content h3 {
  margin-bottom: 10px;
  color: #1e3c72;
}

/* 搜索区域 */
.search-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.search-title {
  font-size: 20px;
  color: #1e3c72;
  margin-bottom: 15px;
}

.search-form {
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 16px;
}

.search-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0 25px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.search-btn:hover {
  opacity: 0.9;
}

</style>